<script>
import SockJS from "sockjs-client";
import Stomp from "stompjs";

let username;
let roomId;
export default {
  data() {
    return {
      // wsUrl: "http://" + document.location.host + "/chat",
      wsUrl: "http://172.16.40.251:28443/chat",
      client: null,
      sockJs: null,
      userList: [],
      username: '',
      roomId: '',
      messageList: [],  //所有的消息
      chatContent: ''
    }
  },
  methods: {

    chatScroll: function () {
      this.$nextTick(() => {
        let chatRecord = this.$refs.chatRecord.wrap$;
        chatRecord.scrollTop = chatRecord.scrollHeight;
      })
    },

    // 登录到具体的房间
// const websocket = new WebSocket(wsUrl);
    loginIntoRoom: function () {
      this.sockJs?.close();
      this.client?.disconnect();
      // 创建 SockJS对象
      this.sockJs = new SockJS(this.wsUrl);
      // 连接对象
      this.client = Stomp.over(this.sockJs);
      // this.client = Stomp.this.client(wsUrl);

      username = this.username;
      roomId = this.roomId;

      const headers = {   //构建websocket请求头信息
        username: username,
        roomId: roomId
      };
      this.client.connect(headers, () => {
        // 用户上线获取所有的用户
        this.client.subscribe("/connection/" + roomId, (_data) => {
          this.userList = JSON.parse(_data.body); //取得用户的列表
        });
        // 用户上线之后，获取所有的聊天记录
        this.client.subscribe("/room/allMessage/" + roomId, (_data) => {
          //获取所有的信息
          this.messageList = JSON.parse(_data.body);
          this.chatScroll();
        });
        // 其他人上线了，传递过来的用户列表
        this.client.subscribe("/room/" + roomId, (_data) => {
          this.userList = JSON.parse(_data.body); //取得用户的列表
        });
        // 监听的当前房间号的聊天信息
        this.client.subscribe("/room/" + roomId + "/message", (_data) => {
          let msg = JSON.parse(_data.body);//获取聊天信息
          this.messageList.push(msg);
          if (msg.username === username) {
            this.chatScroll();
          }
        })
      });
    },

// 用户点击发送按钮，发送信息
    sendMsg: function () {
      if (this.chatContent.length <= 0) {
        return;
      }
      this.client.send("/room/" + roomId + "/" + username, {}, this.chatContent);
      this.chatContent = '';
    }
  }
}
</script>

<template>
  <div class="win-chat">
    <el-scrollbar class="user-list">
      <li class="user-item" v-for="(username, index) in userList" :key="username">{{ index + 1 + '.' + username }}</li>
    </el-scrollbar>
    <div class="win-left">
      <el-scrollbar class="user-chat-record" ref="chatRecord">
        <ul class="chat-record-list">
          <template v-for="msg in messageList">
            <li class="chat-record-left" v-if="msg.username !== this.username" :key="'l'+msg.msgId">
              <div class="chat-record-user">
                <div class="chat-record-name">{{ msg.username }}</div>
                <div class="chat-record-time">{{ msg.sendDateTime }}</div>
              </div>
              <div class="chat-record-message">
                {{ msg.content }}
              </div>
            </li>
            <li class="chat-record-right" v-else :key="'r'+msg.msgId">
              <div class="chat-record-message">
                {{ msg.content }}
              </div>
              <div class="chat-record-user">
                <div class="chat-record-name">{{ msg.username }}</div>
                <div class="chat-record-time">{{ msg.sendDateTime }}</div>
              </div>
            </li>
          </template>
        </ul>
      </el-scrollbar>
      <div class="user-action">
        <div class="user-join">
          <div class="form-item">
            <span class="form-label"> 房间号: </span>
            <el-input placeholder="房间号" v-model="roomId" clearable type="text" class="form-input"/>
          </div>
          <div class="form-item">
            <span class="form-label"> 名字: </span>
            <el-input placeholder="名字" v-model="username" clearable type="text" class="form-input"/>
          </div>
          <el-button type="warning" @click="loginIntoRoom()">连接</el-button>
        </div>
        <div class="user-area">
          <div class="user-textarea">
            <el-input type="textarea" :rows="8" :autosize="false" v-model="chatContent"
                      @keyup.enter.stop="sendMsg"></el-input>
          </div>
          <div class="submit">
            <el-button type="success" @click="sendMsg()">发送</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
html, body, #app {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
}

.win-chat {
  width: 100%;
  height: 100%;
  display: flex;
}

.user-list {
  margin: 0;
  list-style: none;
  padding-left: 0;
  flex: 0 0 15%;
  height: 100%;
  overflow-y: auto;
  border-right: 1px solid #f1f1f1;
}

.user-item {
  padding: 10px;
}

.user-item + .user-item {
  border-top: 1px solid #f1f1f1;
}

.win-left {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.user-chat-record {
  flex: 100%;
  overflow-y: auto;
  border-bottom: 1px solid #f1f1f1;
}


.user-action {
  flex: 0 0 30%;
  display: flex;
}

.user-join {
  box-sizing: border-box;
  padding: 15px;
  flex: 0 0 30%;
  border-right: 1px solid #f1f1f1;
}

.user-area {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.user-textarea {
  flex: 1;
  overflow: hidden;
  display: flex;
}

/*.user-textarea .textarea {*/
/*  resize: none;*/
/*  flex: 1;*/
/*}*/

.submit {
  flex: 0 0 40px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 15px;
}

.form-input {
  height: 35px;
  width: 100%;
  box-sizing: border-box;
  padding: 5px 8px;
}

.form-item {

  width: 100%;
  margin-bottom: 15px;
}

.form-label {
  font-size: 14px;
  display: inline-block;
  margin-bottom: 5px;
}

.chat-record-list {
  margin: 0;
  list-style: none;
  padding: 15px;
  box-sizing: border-box;
}

.chat-record-list li {
  width: 100%;
}

.chat-record-list > li + li {
  margin-top: 15px;

}

.chat-record-left {
  display: flex;
  text-align: left;
  justify-content: flex-start;

}

.chat-record-right {
  display: flex;
  text-align: right;
  justify-content: flex-end;
}

.chat-record-user {
  font-size: 14px;
}

.chat-record-user .chat-record-time {
  font-size: 12px;
  color: #999;
}

.chat-record-message {
  padding: 10px;
  background: rgb(81, 133, 82);
  border-radius: 8px;
  font-size: 12px;
  color: #fff;
  position: relative;
  white-space: pre-wrap;
}

.chat-record-message:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;

  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.chat-record-left .chat-record-message {
  margin-left: 15px;
}

.chat-record-left .chat-record-message:after {
  left: -10px;
  top: 15px;
  border-right: 5px solid rgb(81, 133, 82);
  border-left: 5px solid transparent;
}

.chat-record-right .chat-record-message {
  margin-right: 15px;
  text-align: left;
}

.chat-record-right .chat-record-message:after {
  right: -10px;
  top: 15px;
  border-left: 5px solid rgb(81, 133, 82);
  border-right: 5px solid transparent;
}
</style>